<template>
  <div class="login">
    <div class="login_box">
      <div class="login_cen">
        <div class="cen_box">
          <ul style="padding-inline-start: 0;">
            <li class="name">用户名:</li>
            <li class="input">
              <input class="el-input" type="text" v-model="input" placeholder="请输入用户名" />
            </li>
          </ul>
          <ul style="padding-inline-start: 0;">
            <li class="name">密码:</li>
            <li class="input">
              <input class="el-input" type="password" v-model="input1" placeholder="请输入密码" />
            </li>
          </ul>
          <div class="log" @click="loginn">登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { login } from "@/api/api";
export default {
  name: "Login",
  data() {
    return {
      input: "",
      input1: ""
    };
  },
  computed: {
    ...mapState(["merchantInfo"])
  },
  methods: {
    ...mapMutations(["setToken", "setData", "setId"]),
    loginn() {
      if (this.input1.length < 5) {
        alert("密码输入错误");
      } else {
        //发送ajax登录接口
        login({
          username: this.input,
          password: this.input1
        }).then(res => {
          console.log(res);
          this.$store.commit("setData", res.data.data);
          this.$store.commit("setToken", res.data.data.passport);
          if (res.data.code == 0) {
            this.$router.push("/Home");
            this.$store.commit("setId", res.data.data.uid);
          } else {
            alert("登录信息错误");
          }
        });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  position: relative;
  .login_box {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(blue, pink);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    .login_cen {
      width: 390px;
      border-radius: 5px;
      background: #fff;
      padding: 0 40px 40px 30px;
      .cen_box {
        .name {
          font-size: 15px;
          margin: 20px 0;
        }
        .el-input {
          height: 26px;
          width: 100%;
          border-radius: 5px;
          border: 1px solid #ccc;
          padding: 8px;        
        }
        :focus {
            outline: none;
            border: 1px solid green;
          }
        .log {
          height: 20px;
          width: 100%;
          padding: 8px;
          color: #fff;
          background: #409eff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 15px;
          border-radius: 5px;
          margin-top: 30px;
        }
      }
    }
  }
}
</style>
